fix(core/dropdown-button): Dropdown-button adaptions - #2711
Open
dmytro-halimov wants to merge 6 commits into
Open
fix(core/dropdown-button): Dropdown-button adaptions#2711dmytro-halimov wants to merge 6 commits into
dmytro-halimov wants to merge 6 commits into
Conversation
🦋 Changeset detectedLatest commit: d1580f8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThe ChangesDropdown button updates
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/dropdown-button-decorative-icon.md:
- Line 5: Update the changeset summary for ix-dropdown-button to include the
published styling changes: variant-specific hover/active state mapping and
pointer-cursor behavior. Keep the wording consumer-focused and retain the
existing accessibility impact.
In
`@packages/angular-standalone-test-app/src/preview-examples/dropdown-button.ts`:
- Around line 21-41: Remove the nested ix-dropdown-item elements from the
disabled dropdown example in the dropdown-button preview, leaving the disabled
ix-dropdown-button itself unchanged and matching the Angular, HTML, and React
examples.
In `@packages/core/src/components/dropdown-button/dropdown-button.tsx`:
- Around line 221-230: Update the public JSDoc for ariaLabelDropdownButton to
document that the resolved label is applied to the host element and that the
nested implementation button is inert. Keep the existing description of the
label’s purpose while explicitly covering both host-label behavior and the inert
control.
- Around line 221-230: Add regression coverage in dropdown-button.ct.ts using
regressionTest for label precedence, empty label handling, host focusability,
inert nested controls, hidden decorative icons, and the menu accessible name;
include hydration/render scenarios and a makeAxeBuilder accessibility check,
using accessible locators where applicable.
- Around line 221-225: Update the accessible-name fallback in the dropdown
button render logic around the ariaLabel calculation so an empty this.label is
treated as absent, allowing the open/close fallback to provide the host
accessible name. Preserve the existing precedence for non-empty hostAriaLabel,
ariaLabelDropdownButton, and label values.
In `@packages/storybook-docs/src/stories/dropdown-button.stories.ts`:
- Around line 40-50: Update the dropdown button story’s render callback to pass
an afterRender hook to genericRender, create and append the ix-dropdown-item
children through that hook, and remove the querySelector and non-null assertion
on ix-dropdown-button.
In `@packages/vue-test-app/src/preview-examples/dropdown-button.vue`:
- Line 39: Update the disabled dropdown variant in the Vue preview around
IxDropdownButton so it matches the HTML and React examples by rendering no
IxDropdownItem children; preserve the existing label, disabled prop, and icon.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 3752d26f-fef0-4512-a83a-4f34e242413c
📒 Files selected for processing (14)
.changeset/dropdown-button-decorative-icon.mdpackages/angular-standalone-test-app/src/preview-examples/dropdown-button.csspackages/angular-standalone-test-app/src/preview-examples/dropdown-button.tspackages/angular-test-app/src/preview-examples/dropdown-button.csspackages/angular-test-app/src/preview-examples/dropdown-button.tspackages/core/src/components/dropdown-button/dropdown-button.scsspackages/core/src/components/dropdown-button/dropdown-button.tsxpackages/html-test-app/src/preview-examples/dropdown-button.csspackages/html-test-app/src/preview-examples/dropdown-button.htmlpackages/react-test-app/src/preview-examples/dropdown-button.scoped.csspackages/react-test-app/src/preview-examples/dropdown-button.tsxpackages/storybook-docs/src/stories/dropdown-button.stories.tspackages/vue-test-app/src/preview-examples/dropdown-button.csspackages/vue-test-app/src/preview-examples/dropdown-button.vue
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/core/src/components/dropdown-button/dropdown-button.tsx (1)
221-229: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winTreat empty configured ARIA labels as absent.
If a consumer sets
aria-label=""oraria-label-dropdown-button="", this expression selects the empty string. The host is the only interactive button because the nested controls are inert. The host then has no accessible name.Normalize both configured labels before applying precedence. Add component tests for both empty configured-label cases.
Proposed fix
+ const fallbackAriaLabel = this.dropdownShow + ? 'Close dropdown' + : 'Open dropdown'; const ariaLabel = - this.hostAriaLabel ?? - this.ariaLabelDropdownButton ?? - (this.label || (this.dropdownShow ? 'Close dropdown' : 'Open dropdown')); + this.hostAriaLabel || + this.ariaLabelDropdownButton || + this.label || + fallbackAriaLabel;As per coding guidelines, “Keep accessibility behavior … as consumer contracts.” As per path instructions, “Prioritize correctness, regressions, accessibility, release impact, and missing validation.”
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/dropdown-button/dropdown-button.tsx` around lines 221 - 229, Normalize hostAriaLabel and ariaLabelDropdownButton so empty strings are treated as absent before applying the precedence in the ariaLabel calculation, preserving fallback to the component label or open/close text. Add component tests covering each configured label being empty and verify the host receives the fallback accessible name.Sources: Coding guidelines, Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/core/src/components/dropdown-button/dropdown-button.tsx`:
- Around line 221-229: Normalize hostAriaLabel and ariaLabelDropdownButton so
empty strings are treated as absent before applying the precedence in the
ariaLabel calculation, preserving fallback to the component label or open/close
text. Add component tests covering each configured label being empty and verify
the host receives the fallback accessible name.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: c75f7c28-307e-4700-990f-a139a0439573
📒 Files selected for processing (4)
packages/core/src/components/dropdown-button/dropdown-button.ct.tspackages/core/src/components/dropdown-button/dropdown-button.tsxpackages/storybook-docs/src/stories/dropdown-button.stories.tspackages/vue-test-app/src/preview-examples/dropdown-button.vue
|
9 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🆕 What is the new behavior?
Tracked under EIX-74
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test)pnpm lint)pnpm build, changes pushed)👨💻 Help & support
Summary by CodeRabbit
Accessibility
Bug Fixes
Documentation